<template>
  <div class="content">
      <div class="workbench">
          <div class="worktop border_style bg_style">
              <div class="workinput">
                  <div style="margin-right:8px">
                      <YsInput clearable type="text" class="search-input" v-model="pege_param.keyword"
                          @keydown.enter.native="getObjectList" placeholder="请输入关键字">
                      </YsInput>
                  </div>
                  <div>
                      <YsButton type="primary" class="searchBtn" @click="getObjectList()">查询</YsButton>
                  </div>
              </div>
              <div class="open-btn">
                  <YsButton class="right-between" @click="openProbjectModal(null, true)">新增</YsButton>
              </div>
          </div>
          <div class="table-box border_style bg_style">
              <proTable ref="proTableDom" class=" border01" :loading="page.tableLoad" :columns="page.columns"
                  :data="page.data" @clickPage="onClickPage" :current="pege_param.start_recd" :total="page.allTotal"
                  :pageSize="pege_param.limit_recd"></proTable>
          </div>
      </div>
      <pro-dialog class="setdialog" ref="probjectModal" width="628" :nopadding="true" :title="addAndExit ? '新增' : '编辑'">
          <div style="padding: 32px 50px 32px 40px">
              <YsForm ref="probjectFrom" :model="projectInfo" :label-width="130" :rules="app_rule">
                  <YsRow :gutter="16">
                      <YsCol span="24">
                          <YsFormItem label="项目编号" prop="pd_code">
                              <YsInput size="large" :maxlength="20" v-model="projectInfo.pd_code"></YsInput>
                          </YsFormItem>
                      </YsCol>
                  </YsRow>
                  <YsRow :gutter="16">
                      <YsCol span="24">
                          <YsFormItem label="项目名称" prop="pd_name">
                              <YsInput size="large" :maxlength="20" v-model="projectInfo.pd_name"></YsInput>
                          </YsFormItem>
                      </YsCol>
                  </YsRow>
                  <YsRow :gutter="16">
                      <YsCol span="24">
                          <YsFormItem label="客户" prop="pd_customer">
                              <YsInput size="large" :maxlength="20" v-model="projectInfo.pd_customer"></YsInput>

                          </YsFormItem>
                      </YsCol>
                  </YsRow>
                  <YsRow :gutter="16">
                      <YsCol span="24">
                          <YsFormItem label="备注" prop="remark">
                              <YsInput v-model="projectInfo.remark" :class="curTheme" class="input-border"
                                  show-word-limit type="textarea" maxlength="30" placeholder="请输入"
                                  :autosize="{ minRows: 4, maxRows: 5 }"></YsInput>
                          </YsFormItem>
                      </YsCol>
                  </YsRow>

              </YsForm>
              <YsRow class="foot-btn" style="margin-top: 10px">
                  <YsButton @click="handleCancel()" size="large">关闭</YsButton>
                  <YsButton @click="handleOk('probjectFrom')" :loading="btnDisabled" size="large" type="primary">确定
                  </YsButton>
              </YsRow>
          </div>
      </pro-dialog>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  name: "projectMaintenance",
  computed: {
      ...mapState(['curTheme']),
      ...mapGetters(["getCommData"]),
  },
  data() {
      return {
          btnDisabled: false,
          projectInfo: {
              pd_code: "",
              pd_name: "",
              pd_customer: "",
              remark: "",
          },
          addAndExit: true,
          pege_param: {
              ent_no: "",//企业编号
              keyword: "",
              start_recd: 1,//开始数据
              limit_recd: 10,//查询的条数
          },
          page: {
              tableLoad: false,
              allTotal: 0,
              columns: [
                  {
                      title: "序号",
                      width: 80,
                      tooltip: true,
                      render: (h, params) => {
                          return h(
                              "span",
                              params.index +
                              (this.pege_param.start_recd - 1) *
                              this.pege_param.limit_recd +
                              1
                          );
                      },
                  },
                  {
                      title: "项目名称",
                      minWidth: 100,
                      key: "pd_name",
                      tooltip: true
                  },
                  {
                      title: "项目编号",
                      key: "pd_code",
                      minWidth: 100,
                      tooltip: true
                  },
                  {
                      title: "客户",
                      key: "pd_customer",
                      minWidth: 100,
                      tooltip: true
                  },
                  {
                      title: "备注",
                      key: "remark",
                      minWidth: 100,
                      tooltip: true
                  },
                  {
                      title: "操作",
                      width: 150,
                      render: (h, params) => {
                          let _this = this;

                          return h("div", [
                              h("span", {
                                  domProps: {
                                      innerText: "编辑",
                                  },
                                  class: "textColor",
                                  on: {
                                      click: (event) => {
                                          this.openProbjectModal(params.row, false);
                                          event.stopPropagation();
                                      },
                                  },
                              }),
                              h("span", {
                                  domProps: {
                                      innerText: "删除",
                                  },

                                  class: "textColor",
                                  on: {
                                      click: (event) => {
                                          this.handleDlelteItem(params.row);
                                          event.stopPropagation();
                                      },
                                  },
                              }),

                          ]);

                      },
                  },
              ],
              data: [],
          },
          app_rule: {
              pd_code: [
                  { required: true, message: "项目编号不能为空", trigger: "blur" },
              ],
              pd_name: [
                  { required: true, message: "项目名称不能为空", trigger: "blur" },
              ],
          },
      };
  },

  methods: {
      ...mapActions(['getPageQueryProjectAPI', 'addSpringProjectAPI', 'editSpringProjectAPI', 'delSpringProjecAPI']),
      //获取服务列表
      getObjectList() {
          let _this = this
          this.page.tableLoad = true
          _this.getPageQueryProjectAPI(this.pege_param).then(res => {
              let { data, msg, scode, status } = res;
              _this.page.tableLoad = false
              if (status === 'ok') {
                  this.page.data = data.projectInfos
                  this.page.allTotal = data.all_recd
              } else {
                  _this.$YsMessage.error(msg);
              }
          }).catch(err => {
              _this.page.tableLoad = false
              _this.$YsMessage.error('获取数据失败');
          })
      },
      //分页
      onClickPage(pageNum) {
          this.pege_param.start_recd = pageNum
          this.getObjectList()
      },
      //创建项目和编辑项目
      openProbjectModal(item, flag) {
          this.addAndExit = flag
          this.$refs.probjectFrom.resetFields()
          if (!this.addAndExit) {
              this.projectInfo = {
                  pd_code: item.pd_code,
                  pd_name: item.pd_name,
                  pd_customer: item.pd_customer,
                  remark: item.remark,
                  id: item.id,
              }
          }
          this.$refs.probjectModal.show()
      },
      //确认
      handleOk(name) {
          this.$refs[name].validate((valid) => {
              if (valid) {
                  if (this.addAndExit) {
                      this.addProbjectItem()
                  } else {
                      this.exitProbjectItem()
                  }
              }
          });
      },
      //取消
      handleCancel() {
          this.$refs.probjectModal.close()
      },
      //新增
      addProbjectItem() {
          let _this = this;
          this.btnDisabled = true
          _this.addSpringProjectAPI({ projectInfo: _this.projectInfo }).then((res) => {
              let { data, msg, scode, status } = res;
              this.btnDisabled = false
              if (status === "ok") {
                  _this.$YsMessage.success("新增成功");
                  _this.getObjectList();
                  _this.$refs.probjectModal.close();
              } else {
                  _this.$YsMessage.error(msg);
              }
          }).catch((err) => {
              _this.$YsMessage.error(err);
          });
      },
      //编辑
      exitProbjectItem() {
          let _this = this;
          this.btnDisabled = true
          _this.editSpringProjectAPI({ projectInfo: _this.projectInfo }).then((res) => {
              let { data, msg, scode, status } = res;
              this.btnDisabled = false
              if (status === "ok") {
                  _this.$YsMessage.success("编辑成功");
                  _this.getObjectList();
                  _this.$refs.probjectModal.close();
              } else {
                  _this.$YsMessage.error(msg);
              }
          }).catch((err) => {
              _this.$YsMessage.error(err);
          });
      },
      //删除
      handleDlelteItem(item) {
          let _this = this;
          this.$YsModal.confirm({
              title: "删除",
              content: "<p>确认是否删除！</p>",
              onOk: () => {
                  _this.delSpringProjecAPI({ projectInfo: { id: item.id } }).then((res) => {
                      let { data, msg, scode, status } = res;
                      if (status === "ok") {
                          _this.$YsMessage.success("删除成功");
                          _this.getObjectList();
                      } else {
                          _this.$YsMessage.error(msg);
                      }
                  }).catch((err) => {
                      _this.$YsMessage.error("删除失败");
                  });
              },
          });
      }
  },
  mounted() {
      let { ent_no } = this.getCommData;
      this.pege_param.ent_no = ent_no
      this.getObjectList()
  },
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;

  // padding: 0 18px;
  /deep/ .workRooter {
      p {
          color: #405680;
          font-size: 16px !important;
      }
  }

  .workbench {
      width: 100%;
      height: calc(100% - 28px);
      // padding: 18px;
      padding-bottom: 0;

      .worktop {
          display: flex;
          align-items: center;
          padding: 0 16px;
          height: 72px;
          border: 1px solid #cfd7e5;
          border-radius: 4px;
          margin-bottom: 8px;

          .workright {
              margin-left: auto;
          }

          .workinput {
              display: flex;
          }

          .open-btn {
              margin-left: auto;
          }
      }

      .dividing-right {
          .current {
              background: #0061ff !important;
              color: #fff !important;
          }

          margin-left: auto;

          .dividing-btn {
              width: 140px;
              height: 40px;
              background: #ffffff;
              border: 1px solid #0061ff;
              opacity: 1;
              padding: 0;
              color: #0091ff;
              border-radius: 4px;
          }

          .dividing-btn2 {
              margin-left: 10px;
          }
      }
  }

  .table-box {
      width: 100%;
      height: calc(100% - 68px);
      border: 1px solid #cfd7e5;
      border-radius: 4px
  }
}

.model-box {
  .icon-chain {
      width: 48px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      margin: 25px auto 0;

      background: rgba(0, 97, 255, 0.1);
      border: 1px solid #0061ff;
      opacity: 1;
      border-radius: 4px;

      .icon {
          font-size: 40px;
          color: #0061ff;
      }
  }

  .formconter {
      padding: 0 16px;

      /deep/.ivu-form-item {
          width: 100%;
      }
  }
}

/deep/.model-tabs {
  border: 1px solid #cfd7e5;
  border-radius: 2px;
  margin: 20px;

  .ivu-tabs-bar {
      background: #f5f7fa;
      border-bottom-color: transparent;
      margin-bottom: 22px;
  }

  .ivu-tabs-tabpane {
      background: transparent;
  }

  .ivu-input[disabled] {
      color: #405680;
  }
}

/deep/ .textColor {
  // color: '#0091FF';
  cursor: pointer;
  color: #0091ff;
  margin-right: 8px;

  &:hover {
      opacity: 0.8;
  }
}

/deep/ .textColor2 {
  // color: '#0091FF';
  color: #0091ff;
  cursor: pointer;

  &:hover {
      opacity: 0.8;
      // color: #d53939;
  }
}

.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
}
</style>
